<script lang="ts">
  import {
    EdgesGeometry,
    LineBasicMaterial,
    MeshStandardMaterial,
    OctahedronGeometry,
    type Vector3Tuple,
  } from "three"
  import { Line, T } from "@threlte/core"

  const material = new LineBasicMaterial({
    color: 0x0000ff,
  })

  const geometry = new OctahedronGeometry(2, 2)

  const linesGeometry = new EdgesGeometry(geometry, 10)
  const lines: Vector3Tuple[][] = []
  for (let index = 0; index < 10; index++) {
    const points: Vector3Tuple[] = []
    for (let index = 0; index < 10; index++) {
      const point = [
        5 - Math.random() * 50,
        5 - Math.random() * 50,
        5 - Math.random() * 50,
      ] as Vector3Tuple
      points.push(point)
    }
    lines.push(points)
  }

  const getRandomColor = () => {
    return `#${Math.floor(Math.random() * 16777215).toString(16)}`
  }
</script>

{#each lines as line}
  <Line
    points={line}
    material={new LineBasicMaterial({
      color: getRandomColor(),
      //   worldUnits: true,
      //   lineWidth: 0.2,
    })}
  />
{/each}
<T.Group position={[3, 2, 1]}>
  <T.Mesh
    {geometry}
    material={new MeshStandardMaterial({
      transparent: true,
      opacity: 0.5,
      flatShading: true,
    })}
  />

  <T.LineSegments scale={1.1} geometry={linesGeometry} {material} />
</T.Group>
